<template>
    <div class = 'aside-panel-wrapper' v-if="isShow"> 
		<div class = "panel-title">
			{{ panelTitle }}
			<div class = "panel-close" @click = "close">
				<i class="iconfont icon-close"></i>
			</div>
		</div>
		<div class = "panel-content">
			<component v-for = "widget in widgetList" 
				:is = "widget" 
				:key = "widget.id" 
				:style = "widget.positionStyle" 
			>
			</component>
		</div>
    </div>
</template>

<script>
import BaseLayoutWidget from '@/jimu/BaseLayoutWidget.js'
export default {
	name: 'AsidePanelWidget',
    mixins:[ BaseLayoutWidget ],
    components: {
      
    },
    data () {
		return {
			isShow: false,
			panelTitle: "title"
		}
    },

	watch:{
		isShow: function(){
			this.resizeMap()
		}
	},
	destroyed(){
		this.resizeMap()
	},
	computed: {
		map: function(){
			return this.shareState.map
		}
	},

    methods:{

		/* 重载基类方法  */
		childWidgetCreate: function(config){
			this.isShow = true			
		},
		setPanelTitle: function(name){
			this.panelTitle = name
		},
		/*重载基类创建子组件方法 */
		_createWidgets: function(){
			for(let i=0; i < this.widgets.length; i++){
				if(this.widgets[i].on){
					this._addWidget(this.widgets[i])
					this.setPanelTitle(this.widgets[i].name)
					return // 只创建第一个状态on:true的子组件
				}
			}
		},
		/* 重载基类打开组件方法 */
		_openWidget: function(id){
			let config = this._getConfig(id)
			if(!this._hasWidget(id) && config){
				this.widgetList = []
				this.setPanelTitle(config.name)
				this._addWidget(config)
			}
		},
		resizeMap: function(){
			this.$nextTick(()=>{
				if(this.map){
 					this.map.resize()
				}
			})
		},

		close: function(){
			this.isShow = false
		}
		
    }
}
</script>

<style lang="scss">
	.aside-panel-wrapper{
		width:400px;
		background-color: #fff;
		border-left: 1px solid #d4d8db;
		overflow-y: auto;
		.panel-title{
			padding: 10px 12px 10px 12px;
			color: rgba(9,17,32,.65);
			background-color: #4087f7;
			color: #fff;
		}
		.panel-content{
			padding: 10px;
		}
		.panel-close{
			height:20px;
			width:20px;
			cursor: pointer;
			float: right;
		}
		.panel-close:hover{
			
		}
	}
</style>